<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>测试</el-breadcrumb-item>
      <el-breadcrumb-item>树形菜单table</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="SHZY-common-search-box">
      <el-row :gutter="20">
        <el-form @submit.native.prevent="">
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                size="small"
                v-model="formInline.keyword"
                placeholder="关键字"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="search()"
                >查询</el-button
              >
              <el-button
                size="small"
                icon="el-icon-refresh-right"
                @click="reset()"
                >重置</el-button
              >
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
    </div>
    <el-card>
      <div class="SHZY-common-head">
        <!-- <el-row :gutter="1">
          <el-col :span="1"
            ><el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="addOrUpdateHandle()"
              >新增</el-button
            ></el-col
          >
          <el-col :span="1"
            ><el-button size="small" type="text" icon="el-icon-download"
              >导入</el-button
            ></el-col
          >
          <el-col :span="1"
            ><el-button size="small" type="text" icon="el-icon-delete"
              >批量删除</el-button
            ></el-col
          >
        </el-row> -->
        <div>
          <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addOrUpdateHandle()"
            >新增</el-button
          >
        </div>
        <!-- <el-button size="small" type="primary">新增</el-button>
        <el-button size="small" type="primary">新增</el-button>
        <el-button size="small" type="primary">新增</el-button> -->
      </div>
      <div>
        <el-table
          :data="tableData"
          row-key="id"
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="desc" label="描述"></el-table-column>
          <el-table-column label="操作" width="180">
            <template slot-scope="scope">
              <el-button
                size="small"
                @click="addOrUpdateHandle(scope.row.id)"
                >编辑</el-button
              >
              <el-button
                type="danger"
                size="small"
                @click="handleDel(scope.row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <TableForm v-if="formVisible" ref="Form" @refresh="refresh"></TableForm>
  </div>
  <!-- <h1>树形菜单</h1> -->
</template>
<script>
import api from "@/api/treemenu";
import TableForm from "../treemenu/tableForm.vue";
export default {
  components: {
    TableForm,
  },
  data() {
    return {
      formVisible: false,
      formInline: {
        keyword: "",
      },
      filterText: "",
      tableData: [],
    };
  },
  watch: {
    // filterText(val) {
    //   this.$refs.tree.filter(val);
    // },
  },
  created() {
    this.gettreemenu();
  },
  methods: {
    addOrUpdateHandle(id) {
      console.log(id);
      this.formVisible = true;
      this.$nextTick(() => {
        this.$refs.Form.init(id);
      });
    },
    handleDel(id) {
      // console.log(id);
      api.DeleteTreeMenu(id).then((res) => {
        console.log(res); //
        if (res.state == "success") {
          this.$message({ message: "删除成功！", type: "success" });
        } else {
          this.$message.error("删除失败！");
        }
      });
    },
    reset() {
      this.formInline.keyword = "";
      this.gettreemenu();
    },
    search() {
      this.gettreemenu();
    },
    refresh(isrRefresh) {
      this.formVisible = false;
      if (isrRefresh) this.reset();
    },
    //获取数据源
    gettreemenu() {
      let TypeDesc = "desc";
      if (this.formInline.keyword == "" || this.formInline == undefined) {
        api.getTreeMenu().then((res) => {
          console.log(res);
          this.tableData = res;
        });
      } else {
        var data = this.filterTree(
          this.tableData,
          this.formInline.keyword,
          TypeDesc
        );
        this.tableData = data;
      }
    },
    //树形数据模糊筛选
    filterTree(treeList, inputValue, key) {
      let newTreeData = [];
      treeList.forEach((item) => {
        if (item[key].indexOf(inputValue) > -1) {
          // newTreeData.push(item);
          // 父级匹配，继续向下查询子级是否匹配
          const arr = this.filterTree(item.children, inputValue, key);
          const obj = {
            ...item,
            children: arr,
          };
          newTreeData.push(obj);
        } else {
          if (item.children && item.children.length > 0) {
            // 父级不匹配，继续向下查询子级是否匹配
            const arr = this.filterTree(item.children, inputValue, key);
            // 如果子级匹配，将符合条件的子级和父级push到目标数组中
            if (arr && arr.length > 0) {
              const obj = {
                ...item,
                children: arr,
              };
              newTreeData.push(obj);
            }
          }
        }
      });
      return newTreeData;
    },
    // filterNode(value, data) {
    //   if (!value) return true;
    //   return data.desc.indexOf(value) !== -1;
    // },
  },
};
</script>

<style scoped>
.el-pagination {
  background: #fff;
  text-align: right;
}
.table-box {
  height: calc(100vh - 330px); /*示例中顶部区域固定高度190px*/
}
</style>